<template>
	<view>
		<u-navbar :autoBack="true" bgColor="#2D3036" :placeholder="true" leftIconColor="#fff">
			<view class="navnar-title" slot="center">締惠盛合用戶端</view>
		</u-navbar>

		<view class="form">
			<view class="default-avatar">
				<image src="/static/logo.png" mode="widthFix" class="img"></image>
			</view>

			<view class="form-item">
				<view class="item-icon">
					<image src="/static/images/user.png" mode="widthFix" class="img"></image>
				</view>
				<view class="item-input">
					<input type="text" class="inp" v-model="formData.username" placeholder="輸入賬號"
						placeholder-class="place-class" />
				</view>
			</view>

			<view class="form-item">
				<view class="item-icon">
					<image src="/static/images/pass.png" mode="widthFix" class="img"></image>
				</view>
				<view class="item-input">
					<input type="password" v-model="formData.password" class="inp" placeholder="輸入密碼"
						placeholder-class="place-class" />
				</view>
			</view>

			<view class="forgot">
				<view class="forgot-btn" @click="forgotPass">忘記密碼？</view>
			</view>

			<view class="submit-btn" @click="submitConfirm">登錄</view>

			<view class="register">
				<view class="register-btn" @click="registerAccount">創建新賬號</view>
			</view>

			<view class="privacy-services">
				<view class="privacy-services-content">
					<checkbox-group @change="checkboxprivacy">
						<checkbox ref="checkboxstatus" value="privacy" style="transform:scale(0.8)" />
					</checkbox-group>
					<view class="privacy-services-btn">
						已阅读并同意
						<span @click="viewprivacy">隐私和服务协议</span>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		userLogin
	} from '@/api/login.js';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				checkboxValue: false
			};
		},
		async onLoad() {
			// if(localStorage.getItem('login')){
			// 	this.formData = JSON.parse(localStorage.getItem('login'))
			// }
		},
		methods: {
			...mapMutations(['login']),
			async submitConfirm() {
				// console.log(JSON.stringify(this.checkboxValue))
				if (this.checkboxValue) {
					try{
						if (!this.formData.username) {
							throw new Error('请输入账号');
						}
						if (!this.formData.password) {
							throw new Error('请输入密码');
						}
						let res = await userLogin(this.formData);
						this.login(res.data);
						uni.setStorageSync('login',JSON.stringify(this.formData))
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}catch(e){
						//TODO handle the exception
						console.log(e);
						uni.showToast({
							title: e.message,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '请勾选隐私和服务',
						icon: 'none'
					});
				}
				
			},
			checkboxprivacy(e) {
				let values = e.detail.value;
				if (values.includes('privacy')) {
					// this.$set(item, 'checked', true)\
					this.checkboxValue = true
				} else {
					// this.$set(item, 'checked', false)
					this.checkboxValue = false
				}
			},
			viewprivacy(){
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				});
			},
			forgotPass() {
				uni.navigateTo({
					url: '/pages/login/forgot'
				});
			},
			registerAccount() {
				uni.redirectTo({
					url: '/pages/login/register'
				});
			}
		},
		mounted() {
			// console.log('1111111111') 
		}
	}
</script>

<style lang="scss">
	.navnar-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 400;
	}

	.form {
		padding: 185rpx 120rpx 30rpx 120rpx;
		width: 100%;
		box-sizing: border-box;

		.default-avatar {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 100rpx;

			.img {
				width: 184rpx;
				height: 184rpx;
			}
		}

		.form-item {
			width: 100%;
			margin-bottom: 22rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 0;
			}

			.item-icon {
				height: 83rpx;
				border-radius: 83rpx 0 0 83rpx;
				background-color: #24272D;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;

				.img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item-input {
				flex: 1;
				height: 88rpx;
				background: #FFFFFF;
				border: 1rpx solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.12);
				border-radius: 6rpx 44rpx 44rpx 6rpx;
				box-sizing: border-box;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 5;
				padding: 10rpx 17rpx;

				.inp,
				.place-class {
					color: #C8C8C8;
					font-size: 24rpx;
					font-weight: 400;
					text-align: left;
				}

				.inp {
					width: 100%;
					height: 100%;
					color: #333;
				}
			}
		}
	}

	.forgot {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.forgot-btn {
			color: #333;
			font-size: 24rpx;
			font-weight: 400;
		}
	}

	.submit-btn {
		margin-top: 99rpx;
		width: 100%;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 38rpx;
		background-color: #EB3434;
		color: #fff;
		font-size: 36rpx;
		font-weight: 400;
	}

	.register {
		padding-top: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.register-btn {
			color: #333;
			font-size: 24rpx;
			font-weight: 400;
			text-decoration: underline;
		}
	}

	.privacy-services {
		padding: 96px 62px 15px 62px;
		position: fixed;
		bottom: 2em;
		width: 100vw;
		left: 0;
		padding: 0;
	}

	.privacy-services-content {
		display: flex;
		justify-content: center;
	}

	.privacy-services-btn {

		font-size: .8em;
		display: flex;
		align-items: center;
	}

	.privacy-services-btn span {
		color: #409EFF !important;
	}
</style>
